<script setup lang="ts">
import { onMounted, ref } from "vue";
import { formRules } from "./utils/rule";
import { FormProps } from "./utils/types";
import ReCol from "@/components/ReCol";
const props = withDefaults(defineProps<FormProps>(), {
  formInline: () => ({
    name: "",
    socialCode: "",
    shortName: "",
    organizationCode: "",
    dunsNumber: "",
    businessType: "",
    taxIdentifyNumber: "",
    registerPlace: "",
    registerAddress: "",
    legalPerson: "",
    principal: "",
    phone: "",
    registeredCapital: 0,
    foundDate: "",
    businessTerm: "",
    businessLongTerm: "",
    businessScope: "",
    businessLicense: "",
    attachmentArr: [],
    corpId: 0,
    status: 0
  })
});
const businessTypeOptions = [
  {
    value: 1,
    label: "合资"
  },
  {
    value: 2,
    label: "独资"
  },
  {
    value: 3,
    label: "国有"
  },
  {
    value: 4,
    label: "私营"
  },
  {
    value: 5,
    label: "全民所有制"
  },
  {
    value: 6,
    label: "集体所有制"
  },
  {
    value: 7,
    label: "股份制"
  },
  {
    value: 8,
    label: "有限责任"
  }
];
const businessLongTermOptions = [
  {
    value: 0,
    label: "非长期"
  },
  {
    value: 1,
    label: "长期"
  }
];
const statusOptions = [
  {
    value: 0,
    label: "未审核"
  },
  {
    value: 1,
    label: "启用"
  },
  {
    value: 2,
    label: "禁用"
  }
];
const ruleFormRef = ref();
const newFormInline = ref(props.formInline);

function getRef() {
  return ruleFormRef.value;
}
defineExpose({ getRef });
//图片上传
import { Plus } from "@element-plus/icons-vue";
import { baseUrlApi, baseOaApi } from "@/api/utils";
import type { UploadProps } from "element-plus";

const imgUrl = ref("");
const handleAvatarSuccess: UploadProps["onSuccess"] = (
  response,
  uploadFile
) => {
  imgUrl.value = URL.createObjectURL(uploadFile.raw!);
  newFormInline.value.businessLicense = baseOaApi + response.result.path;
};
onMounted(() => {
  imgUrl.value = newFormInline.value.businessLicense;
});
const action = baseUrlApi + "/uploadFile/upload";
</script>

<template>
  <el-form
    ref="ruleFormRef"
    :model="newFormInline"
    :rules="formRules"
    label-width="auto"
  >
    <el-row :gutter="30">
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="企业名称" prop="name">
          <el-input
            v-model="newFormInline.name"
            clearable
            placeholder="请输入企业名称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="状态" prop="status">
          <el-select
            v-model="newFormInline.status"
            placeholder="请选择状态"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in statusOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="企业代码(企业统一社会信用代码)"
          prop="socialCode"
        >
          <el-input
            v-model="newFormInline.socialCode"
            clearable
            placeholder="请输入企业代码"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="企业简称" prop="shortName">
          <el-input
            v-model="newFormInline.shortName"
            clearable
            placeholder="请输入企业简称"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="组织机构代码"
          prop="organizationCode"
        >
          <el-input
            v-model="newFormInline.organizationCode"
            clearable
            placeholder="请输入组织机构代码"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="邓白氏编码" prop="dunsNumber">
          <el-input
            v-model="newFormInline.dunsNumber"
            clearable
            placeholder="请输入邓白氏编码"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="企业类型" prop="businessType">
          <el-select
            v-model="newFormInline.businessType"
            placeholder="请选择企业类型"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in businessTypeOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="纳税人标识"
          prop="taxIdentifyNumber"
        >
          <el-input
            v-model="newFormInline.taxIdentifyNumber"
            clearable
            placeholder="请输入纳税人标识"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="企业注册地"
          prop="registerPlace"
        >
          <el-input
            v-model="newFormInline.registerPlace"
            clearable
            placeholder="请输入企业注册地"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="企业注册详细地址"
          prop="registerAddress"
        >
          <el-input
            v-model="newFormInline.registerAddress"
            clearable
            placeholder="请输入企业注册详细地址"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="法定代表人"
          prop="legalPerson"
        >
          <el-input
            v-model="newFormInline.legalPerson"
            clearable
            placeholder="请输入法定代表人"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="企业负责人" prop="principal">
          <el-input
            v-model="newFormInline.principal"
            clearable
            placeholder="请输入企业负责人"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="企业联系电话" prop="phone">
          <el-input
            v-model="newFormInline.phone"
            clearable
            placeholder="请输入企业联系电话"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="注册资本(万)"
          prop="registeredCapital"
        >
          <el-input-number
            v-model="newFormInline.registeredCapital"
            clearable
            placeholder="请输入注册资本"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="成立时间" prop="foundDate">
          <el-date-picker
            v-model="newFormInline.foundDate"
            type="date"
            class="!w-[160px]"
            placeholder="请选择成立时间"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item label-position="top" label="营业期限" prop="businessTerm">
          <el-date-picker
            v-model="newFormInline.businessTerm"
            type="date"
            class="!w-[160px]"
            placeholder="请选择营业期限"
            value-format="YYYY-MM-DD"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="营业期限-是否长期"
          prop="businessLongTerm"
        >
          <el-select
            v-model="newFormInline.businessLongTerm"
            placeholder="请选择营业期限类型"
            class="w-full"
            clearable
          >
            <el-option
              v-for="(item, index) in businessLongTermOptions"
              :key="index"
              :label="item.label"
              :value="item.value"
            />
          </el-select>
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="经营范围"
          prop="businessScope"
        >
          <el-input
            v-model="newFormInline.businessScope"
            clearable
            placeholder="请输入经营范围"
          />
        </el-form-item>
      </re-col>
      <re-col :value="12" :xs="24" :sm="24">
        <el-form-item
          label-position="top"
          label="营业执照"
          prop="businessLicense"
        >
          <el-upload
            class="avatar-uploader"
            :action="action"
            :show-file-list="false"
            :on-success="handleAvatarSuccess"
          >
            <img v-if="imgUrl" :src="imgUrl" class="avatar" />
            <el-icon v-else class="avatar-uploader-icon"><Plus /></el-icon>
          </el-upload>
        </el-form-item>
      </re-col>
    </el-row>
  </el-form>
</template>
<style scoped>
.avatar-uploader .el-upload {
  border: 1px dashed var(--el-border-color);
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition: var(--el-transition-duration-fast);
}

.avatar-uploader .el-upload:hover {
  border-color: var(--el-color-primary);
}

.el-icon.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 178px;
  height: 178px;
  text-align: center;
}
</style>
